<stbui-base-layout>

  <div fxLayout="row">
    <div class="profile m-r-20" fxFlex="340px">
      <mat-card fxFlex>
        <div mat-card-image class="profile-image"></div>
        <div class="profile-image-avatar text-center">
          <img class="avatar"
               src="https://lh5.googleusercontent.com/-hcRNe540rco/AAAAAAAAAAI/AAAAAAAAAAk/DfS45tpAR-A/photo.jpg">
        </div>
        <mat-card-content class="text-center">
          <h4 class="mat-card-title">stbui</h4>
          <h6 class="mat-card-subtitle">前端工程师</h6>
        </mat-card-content>
      </mat-card>
    </div>


    <mat-card fxFlex>
      <mat-card-title>我的信息</mat-card-title>
      <mat-card-content>
        <form fxLayout="column" #formContact="ngForm">
          <mat-form-field class="full-width">
            <input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput placeholder="您的邮箱" name="email" ngModel required>
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput placeholder="您的手机" name="phone" ngModel required>
          </mat-form-field>
          <mat-form-field class="full-width">
            <input matInput placeholder="请您的网址" name="website ngModel" required>
          </mat-form-field>
          <mat-form-field class="full-width">
            <textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
          </mat-form-field>
          <button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">更新资料</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</stbui-base-layout>
